import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:short_video/ui/widgets/custom_refresh.dart';
import 'package:short_video/utils/color_util.dart';

import '../../../entity/profile/own_video_list_entity.dart';
import '../../../utils/asset_util.dart';
import '../../../view_model/profile/like_video_list_view_model.dart';
import '../../widgets/custom_network_image.dart';
import '../../widgets/empty_page.dart';

class LikeVideoListPage extends StatefulWidget {
  const LikeVideoListPage({Key? key}) : super(key: key);

  @override
  State<LikeVideoListPage> createState() => _LikeVideoListPageState();
}

class _LikeVideoListPageState extends State<LikeVideoListPage>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return ChangeNotifierProvider(
      create: (BuildContext context) => LikeVideoListViewModel(),
      child: Consumer<LikeVideoListViewModel>(
          builder: (context, viewModel, child) {
        return CustomRefresh(
          controller: viewModel.refreshController,
          enablePullUp: true,
          onRefresh: () async {
            viewModel.onRefresh();
          },
          onLoading: () async {
            viewModel.onLoading();
          },
          child: _buildContent(viewModel),
        );
      }),
    );
  }

  Widget _buildContent(LikeVideoListViewModel viewModel) {
    return viewModel.datas.isEmpty
        ? const EmptyPage()
        : GridView.builder(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
              childAspectRatio: 0.6,
            ),
            itemCount: viewModel.datas.length,
            padding:
                const EdgeInsets.only(top: 10, left: 10, bottom: 10, right: 10),
            itemBuilder: (BuildContext context, int index) {
              OwnVideoEntity entity = viewModel.datas[index];
              return GestureDetector(
                child: Container(
                  alignment: Alignment.center,
                  decoration: const BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Stack(
                      alignment: Alignment.center,
                      children: [
                        CustomNetworkImage(
                          width: double.infinity,
                          height: double.infinity,
                          fit: BoxFit.cover,
                          url: entity.imgUrl ?? "",
                        ),
                        // color: ColorsUtil.COLOR_999999,
                        // size: const Size(24, 24),
                        Positioned(
                          child: AssetUtil.svgImage(
                            "profile/play",
                            size: const Size(40, 40),
                          ),
                        ),
                        Positioned(
                          left: 5,
                          bottom: 5,
                          child: Row(
                            children: [
                              AssetUtil.svgImage(
                                "profile/play",
                                size: const Size(15, 15),
                              ),
                              const SizedBox(width: 4),
                              Text(
                                "${entity.likesCount ?? 0}",
                                style: const TextStyle(
                                  fontSize: 10,
                                  color: ColorsUtil.COLOR_FFFFFF,
                                ),
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                behavior: HitTestBehavior.opaque,
                onTap: () {
                  FocusScope.of(context).unfocus();
                },
              );
            });
  }
}
